<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <!--
　　　　　　　　('A`) <專題好難 只能洗洗睡啦
　　　　　　／⌒⌒⌒⌒⌒ヽ 
　　　　　／／￣￣￣フ／ 
　　　　／（＿＿＿／／ 
　　　（＿＿＿＿＿ノ 
        -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>加入會員</title>
        <script src="/playdoll/scripts/jquery-1.11.0.min.js"></script>
        <link rel="stylesheet" href="/playdoll/css/datepickerthemes/jquery.ui.all.css">
        <script src="/playdoll/scripts/jquery-ui.js"></script>
        <!-- <link rel="stylesheet" href="/playdoll/css/demos.css"> -->
        <!-- 表單-->
        <script src="/playdoll/scripts/jquery.js"></script>
        <script src="/playdoll/scripts/jquery.validate.js"></script>
        <!-- 表單 -->


        <style type="text/css">
            
            .animateField {
                position: relative; /* 要設成 absolute */                    
            }
            .error {
                background: #ffd5d5;
                color: #FF0000;
            }
            .mainaaa {
                color: white;
            }
        </style>

        <script type="text/javascript">

            var addressXml;

            $(document).ready(function() {
                $("#form1").validate({
                    rules: {
                        Sex: "required",
                        Password: "required",
                        ConfirmPassword: {
                            equalTo: "#Password"
                        }
                    }
                });
                addressXml = $.get("/playdoll/tools/Address.xml", null, LoadCounty, "xml");
                $("#form1").submit(CheckForm);
                $("#County").change(LoadRegion);
                $.get("/playdoll/GetVaildAnswer.servlet?tt=" + new Date().getTime(), null, function(ans) {
                    $("#VaildAnsHidden").val(ans);
                    //alert(ans);
                });

                $("#ChangeVaildImgBtn").click(function() {
                    $("#VaildImg").attr("src", "/playdoll/Captcha.servlet?tt=" + new Date().getTime());
                    $.get("/playdoll/GetVaildAnswer.servlet?tt=" + new Date().getTime(), null, function(ans) {
                        $("#VaildAnsHidden").val(ans);
                    });
                });

                //檢查帳號是否重複
                $("#Account").blur(function() {
                    if ($(this).val().length > 0) {
                        var vv = $(this).val();
                        var pp = $.param({"acct": vv});
                        $.get("/playdoll/CheckDuplicateAccount.servlet", pp, function(ans) {
                            $("#CheckAccountResult").html(ans);
                        });
                    }
                    else {
                        $("#CheckAccountResult").html("");
                    }
                });

                $("#VaildNumText").blur(function() {
                    if ($(this).val().length > 0) {
                        if ($(this).val().toLowerCase() != $("#VaildAnsHidden").val().toLowerCase())
                            $("#CheckVaildResult").html("<span style='color:red; font-weight: bold;'>驗證碼錯誤！</span>");
                        else
                            $("#CheckVaildResult").html("<span style='color:cyan; font-weight: bold;'>驗證碼正確！</span>");
                    }
                    else {
                        $("#CheckVaildResult").html("");
                    }
                });

            });

            //載入縣市
            function LoadCounty(xx) {
                addressXml = xx;
                var s = "";
                var vv = "";
                $(addressXml).find("County").each(function() {
                    vv = $(this).attr("Name");
                    s = "<option value=\"" + vv + "\">" + vv + "</option>";
                    $(s).appendTo("#County");
                });
            }

            //載入鄉鎮
            function LoadRegion() {
                var s = "";
                var uu = "";
                $("#Region").empty();
                uu = "<option value=''>--請選擇--</option>";
                $(uu).appendTo("#Region");

                var vv = $("#County").val();
                if (vv == "--請選擇--")
                    return;
                $(addressXml).find("County[Name=\"" + vv + "\"]").first().children().each(function() {
                    uu = $(this).attr("Name");
                    s = "<option value=\"" + uu + "\">" + uu + "</option>";
                    $(s).appendTo("#Region");
                });
            }

            $(function() {
                // 左搖右晃時的速度
                var speed = 30;

                // 當失去焦點時進行判斷
                $('.animateField').blur(function() {
                    // 先把目前元素轉換成 jQuery 物件後記錄起來
                    var _this = $(this);
                    // 先移除掉已附加的 .error 樣式
                    _this.removeClass('error');

                    // 如果值為空白時...
                    if (_this.val() == '') {
                        // 加上 .error 樣式
                        // 接著開始左搖右晃
                        _this.addClass('error').animate({
                            left: '-=3px'
                        }, speed).animate({
                            left: '+=6px'
                        }, speed).animate({
                            left: '-=6px'
                        }, speed).animate({
                            left: '+=6px'
                        }, speed).animate({
                            left: '-=6px'
                        }, speed).animate({
                            left: '+=6px'
                        }, speed).animate({
                            left: '-=6px'
                        }, speed).animate({
                            left: '+=6px'
                        }, speed).animate({
                            left: '-=3px'
                        }, speed);
                    }
                });
            });


            $(function() {
                $("#Birth").datepicker({
                    changeMonth: true,
                    changeYear: true
                });
            });

            function CheckForm() {
                var msg = "";

                if ($("#CheckAccountResult").text() == "帳號已被使用！" || $("#CheckAccountResult").text() == "")
                    msg += "1";

                if ($("#VaildNumText").val().toLowerCase() != $("#VaildAnsHidden").val().toLowerCase())
                    msg += "1";

                if (msg != "")
                    return false;
            }

        </script>

    </head>
    <body bgcolor="black">                            
        <jsp:include page="../WebTool/Top_bar.jsp"></jsp:include>
            <a href="/playdoll/home"><img src="../images/newLogo.png" style="width:260px;height:81px;"></a>

            <div class="mainaaa">
                <h2 style="text-align: center;">加入會員</h2>
                <form id="form1" action="addmemberprocess" method="post">
                    <table width="1000" cellpadding="10" align="center" >
                        <tr>
                            <td align="right" width="100"><b>帳號：</b></td>
                            <td width="300"><input id="Account" name="Account" type="text" value="" class="animateField required" /><span id="CheckAccountResult"></span></td>
                            <td align="right"><b>生日：</b></td>
                            <td><input id="Birth" name="Birth" type="text" value="" maxlength="0" class="dateISO required" /></td>

                        </tr>      
                        <tr>
                            <td align="right"><b>密碼：</b></td>
                            <td><input id="Password" name="Password" type="text" value="" class="animateField "/></td>                    
                            <td align="right"><b>行動電話：</b></td>
                            <td><input id="Phone" name="Phone" type="text" value="" class="animateField digits required"/></td>
                        </tr>
                        <tr>
                            <td align="right"><b>確認密碼：</b></td>
                            <td><input id="ConfirmPassword" name="ConfirmPassword" type="text" value="" class="animateField "/></td>                    
                            <td align="right" valign="middle"><b>聯絡地址：</b></td>
                            <td rowspan="3">
                                <p><b>縣市：</b><select id="County" name="County" class="animateField"><option value="">--請選擇--</option></select>&nbsp;&nbsp;
                                    <b>鄉鎮市：</b><select id="Region" name="Region" class="animateField"><option value="">--請選擇--</option></select></p>
                                <p><b>地址：</b><input id="Address" name="Address" type="text" value="" class="animateField required" /></p></td>
                        </tr>
                        <tr>
                            <td align="right"><b>姓名：</b></td>
                            <td><input id="Name" name="Name" type="text" value="" class="animateField required"/></td>

                        </tr>
                        <tr>
                            <td align="right"><b>性別：</b></td>
                            <td><input id="MaleSex" name="Sex" type="radio" value="1" />男生 <input id="FemaleSex" name="Sex" type="radio" value="0" />女生
                                <label for="Sex" class="error"></label></td>                    

                        </tr>
                        <tr>
                            <td align="right"><b>電子郵件：</b></td>
                            <td><input id="Email" name="Email" type="text" value="" class="animateField email required"/></td>
                            <td align="right" valign="middle"><b>驗證碼：</b></td>
                            <td rowspan="2">
                                <img id="VaildImg" src="/playdoll/Captcha.servlet" /><br />
                                <input id="VaildNumText" name="vaildNumText" type="text" value="" class="animateField required"/>&nbsp;
                                <input id="ChangeVaildImgBtn" type="button" value="更換圖片"><br />
                                <input id="VaildAnsHidden" type="hidden" value="" />
                                <span id="CheckVaildResult"></span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>                    
                        </tr>
                        <tr>
                            <td align="right">&nbsp;</td>
                            <td>
                                <input id="Submit1" type="submit" value="加入會員" />
                                <input id="Reset1" type="reset" value="重新填寫" /></td>
                            <td align="right">&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>            
                </form>
            </div>
        <jsp:include page="../WebTool/Footer.jsp"></jsp:include>

    </body>
</html>
